<template>
  <div class="padding-top-10">
    <!-- <div class="padding-left-right-40 relative-box margin-top-bottom-10">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="现金流入" name="executeIncomeCash" key="executeIncomeCash"> </el-tab-pane>
        <el-tab-pane label="权责收入" name="executeIncomeDuty" key="executeIncomeDuty"> </el-tab-pane>
      </el-tabs>
      <div>
        <el-button size="mini" type="primary" @click="exportFn">导出</el-button>
      </div>
    </div> -->
    <div class="padding-left-right-20 flex justify-between" style="width: 100%">
      <div class="font-size-18 font-weight-700">项目执行结果及预测</div>
      <el-button size="mini" type="primary" @click="exportFn">导出</el-button>
    </div>
    <div class="padding-left-20 padding-top-10">
      累计现金收入{{7523.3}}，计划偏差{{7523.3}}（{{33.3}}%），预计年度现金收入{{7523.3}}，计划偏差{{7523.3}}（{{28}}%）
    </div>
    <div class="flex">
      <charge-list ref="group" :chargeType="chargeType" ctype="income" @tabCharge="tabCharge"></charge-list>
      <table-list v-if="!isAsset" key="table" ref="table" :dataList="dataList" :isTree="true" :tableType="activeName" class="flex-1 margin-left-20 margin-top-20"></table-list>
      <table-shop-list v-if="isAsset" key="tableShop" ref="shoptable" :sourceData="dataList" :tableType="activeName" :isExecute="true" class=" margin-left-20 margin-top-50"></table-shop-list>
    </div>
  </div>
</template>
<script>
  import lodash from 'lodash';
  import { toFixedTwo,uploadLoad } from '@/common/js/utils';
  import chargeList from '../components/chargeList.vue';
  import tableList from '../components/tableList.vue';
  import tableShopList from '../components/tableShopList.vue';
  import { apiExecuteChargeIncome } from '../../../api/businessManage';
  import { apiPlanChargeIncometExport } from '@a/about';

  export default {
    data() {
      return {
        dataList: [],
        activeName: 'executeIncomeCash',
        chargeItemKey: '',
        isAsset: false,
        chargeType: 'cash',
      };
    },
    methods: {
      async tabClick(row) {
        this.activeName = row.name;
        this.chargeType = row.name == 'executeIncomeCash' ? 'cash' : 'forecast';
        await this.$nextTick()
        this.$refs.group.getInfo();
      },

      async getInfo() {
        let res = await apiExecuteChargeIncome({
          planType: 2, //1-编制 2-执行
          type: this.activeName == 'executeIncomeCash' ? 1 : 2, //1-现金流 2-权责
          projectKeys: this.$route.query.projectKey ? [this.$route.query.projectKey] : null,
          year: this.$route.query.year,
          month: this.$route.query.month,
          chargeItemKey: this.chargeItemKey,
        });

        this.initFiled(res.rows);

        this.dataList = res.rows || [];
      },

      initFiled(list) {
        list.forEach(item => {
          item.className = item.chargeItemName;
          item.allMoney1 = this.isAsset ? item.currReceivableAmount : item.currReceivedAmount;
          item.allMoney2 = this.isAsset ? item.currReceivedAmount : item.currYearPlanAmount;

          item.allMoney3 = item.currOverdueAmount;
          item.allMoney4 = item.forecastYearAmount;
          item.allMoney5 = item.yearPlanAmount;
          if (item.child && item.child.length > 0) {
            this.initFiled(item.child);
          }
        });
      },

      exportFn() {
        apiPlanChargeIncometExport({
          planType: 2, //1-编制 2-执行
          type: this.activeName == 'executeIncomeCash' ? 1 : 2, //1-现金流 2-权责
          projectKeys: this.$route.query.projectKey ? [this.$route.query.projectKey] : null,
          year: this.$route.query.year,
          month: this.$route.query.month,
          chargeItemKey: this.chargeItemKey,
        }).then(res => {
        });
      },

      tabCharge(key, isAsset) {
        this.chargeItemKey = key;
        this.isAsset = isAsset;
        this.getInfo();
      },
    },

    mounted() {},

    components: { chargeList, tableList, tableShopList },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-table__header th {
    background: rgba($color: #f8f8f8, $alpha: 1);
  }
  .border-line {
    border-bottom: 1px solid #e5e5e5;
  }
  .btn-box {
    position: absolute;
    right: 20px;
    top: 5px;
  }
</style>
